<template>
  <div>
    <Header></Header>
    <div>
      <router-view></router-view>
    </div>
    <Bottom></Bottom>
    <div class="customer-service-dot" @click="showChatBox">
      <el-icon>
        <Service style="color:#1E90FF;" />
      </el-icon>
      <div class="box" v-if="show">
        <div class="jox-box">
          <div class="max-box">
            <img style="width: 100px; padding-left: 30px;" :src='infos.erweima' />
            <div style="width: 125px;">电话:400-007-1238</div>
          </div>
        </div>
      </div>
    </div>
    <el-backtop :right="20" :bottom="80" />
  </div>

</template>

<script setup>
import Header from "./components/Header.vue";
import Bottom from "./components/Bottom.vue";
import { Service } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import { getSettings } from '@/api/setting';
const infos = ref({})
onMounted(() => {

  getSettings(['erweima']).then((res) => {
    infos.value = res.data.data
  });
});
const show = ref(false)
function showChatBox() {
  show.value = !show.value
}
</script>

<style lang="scss" scoped>
.customer-service-dot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 45px;

  .box {
    width: 150px;
    height: 150px;
    box-shadow: rgba(127, 135, 144, 0.16) 0px 8px 24px 0px;
    background-color: rgb(255 255 255);
    position: fixed;
    right: 75px;
    bottom: 18px;
    // display: none;

    .jox-box {
      position: absolute;
      right: -10px;
      top: 86%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 10px solid #ffffff;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      z-index: 99;
      display: block;

      .max-box {
        min-width: 135px;
        font-size: 14px;
        position: relative;
        min-height: 130px;
        bottom: 115px;
        right: 150px;
      }

    }
  }

}
</style>
